---
slug: fetch #路径，不能重复
title: fetch # 标题
authors: [] # 作者，在authors.yml配置
tags: [facebook, hello, docusaurus] # 标签，在tags.yml配置
toc_min_heading_level: 2 # 最小展示标题
toc_max_heading_level: 5 # 最大展示标题
---
##  fetch
### 向服务端发送请求的方案
1. `XMLHttpRequest`
    * `ajax` 自己编写请求的逻辑和步骤
    * `axios` 第三方库，针对`XMLHttpRequest`进行封装（基于Promise进行封装）
2. `fetch`
    > es6内置的api,本身基于`Promise`
    * 不兼容IE
    * 机制的完善度上,还是不如`XMLHttpRequest`(无法设置超时时间,没有内置的请求中断的处理)
3. 其他方案(主要是跨域为主)
    * `jsonp`
    * `postMessage`
    * 利用`img`的`src`发送请求，实现数据的埋点和上报
    * ...
### 说明
1. 只要是服务器能调用到，不管是404还是500还是什么的对于fetch而言都是then

```js
fetch('./index.js').then(res=>{
})
```

#### 对于fetch返回的头部信息`header`取出服务器时间

```js
fetch('/api/list').then(res=>{
    const {headers} = res;
    console.log(headers.get('Date'));
})
```

#### 添加正则判断,当是2或3开头的状态码才算成功

```js
fetch('/api/list').then(res=>{
    const {status,headers,statusText} = res;
    if(/^([23])\d{2}$/.test(status)){
        console.log('success')
        return res.json();
    }else {
        //假设是状态码不对
        return Promise.reject({
            code:-100,
            status,statusText
        });//对于非2或3开头的状态码使其进入catch
    }
}).then(finalResult=>{
    console.log('最终处理结果',finalResult);
}).catch(err=>{

})
```


#### 对于 <MdxToolTipComp text={'Content-Type'}/> =`application/x-www-form-urlencoded`的
> 就是name=123&id=1&code=200这样的传参方式

`npm install qs`

```js
import qs from 'qs';
const response =  fetch('/api/list',{
        method: 'post',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: qs.stringify({
            id:1,
            name:1
        })
    });
    response.then(response => {
        const {headers,status,statusText}=response;
        if(/^([23])\d{2}$/.test(status)){
            console.log(status);
        }
        return Promise.reject(statusText);
    }).catch(error => console.log(error));
```


### Headers类

> 头处理类

```js
let header = new Headers;
header.append('Content-Type','application/json')
header.append('name','111');

header.delete('name');

let api = fetch('/appi/list',{
    headers:header
})
```

### `fetch`的请求中断

```js
    const control = new AbortController();
    const response =  fetch('/api/list',{
        method: 'post',
        signal: control.signal//请求中断信号
    });
    //立即中断请求
    control.abort();
```

### 封装fetch

## `Object.assign`
> `Object.assign(target,source)` 把`source`复制给`target`，并修改`target`

```js
let obj1 = {x:1,y:2};
Object.assign(obj1,{z:3});

console.log(obj1);//=> {x:1,y:2,z:3}
```

